<%@page import="com.mto.module.karaoke.service.UserSongsLocalServiceUtil"%>
<%@ include file="/jsps/main.jsp"%>

<%
long userSongsId = ParamUtil.getLong(request, "userSongsId");
UserSongs userSongs = UserSongsLocalServiceUtil.getUserSongs(userSongsId);
userSongs.setListenNumber(userSongs.getListenNumber() + 1);
UserSongsLocalServiceUtil.updateUserSongs(userSongs);

Song recordSong = null;
String songName = "", songAuthor = "", songSinger = "", recordNumber = "",audioUrl="", 
action = "save", lyricUrl="", strSongId = String.valueOf(userSongs.getSongId());

Integer songCategory = 0;

if(userSongs.getSongId() > 0) {
	recordSong = SongLocalServiceUtil.getSong(userSongs.getSongId());
	songName = recordSong.getSongName();
	songAuthor = recordSong.getSongAuthor();
	songCategory = recordSong.getSongCategory();
	songSinger = recordSong.getSongSinger();
	recordNumber = String.valueOf(recordSong.getRecordNumber());
	audioUrl = recordSong.getAudioUrl();
	lyricUrl = recordSong.getSongUrl();
	
}

PortletURL cUrl = renderResponse.createRenderURL();
cUrl.setParameter("jspPage", "/jsps/san-khau/play.jsp");
cUrl.setParameter("tab", "san-khau");
cUrl.setPortletMode(PortletMode.VIEW);
cUrl.setParameter("userSongsId", String.valueOf(userSongs.getUserSongId()));
%>


<div id="video-info">
	<aui:layout>
		<aui:column columnWidth="70">
			<div id="video-container">
				<div id="video-container-inner">
					<div class="video-title"><%=songName %></div>
					<!-- 		<video id="video-content" class="video-js vjs-default-skin" controls
						preload="none" width="640" height="264"
						poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
						<source src="http://video-js.zencoder.com/oceans-clip.mp4"
							type='video/mp4' />
						<source src="http://video-js.zencoder.com/oceans-clip.webm"
							type='video/webm' />
						<source src="http://video-js.zencoder.com/oceans-clip.ogv"
							type='video/ogg' />			
					</video> -->
					<video id="video-content" class="video-js vjs-default-skin" controls
						preload="auto" width="640" height="264" poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" 
						data-setup="{}" autoplay="autoplay">
			<!-- 						<source src="http://www.w3schools.com/html/mov_bbb.mp4"	type="video/mp4"> -->
			<!-- 						<source src="http://www.w3schools.com/html/mov_bbb.ogg"	type="video/ogg">						 -->
					</video>
					
					<div id="karaoke-display-lyric" class="karaoke-display-lyric" style="font-size: xx-large;"></div>
					
					
					<br>
					<br>
					<div id="video-controls">
						<button onclick="playSanKhau()">Play</button>						
					</div>
					
					<audio id="audio-beat" controls="controls" style="margin-top: 20px;">
						<source src="<%=audioUrl %>" type="audio/mpeg">
					</audio>
					
				</div>
			</div>
		</aui:column>

		<aui:column columnWidth="30">
			<br>
			<table class="table">
				<tr>
					<th style="width:100px"><liferay-ui:message key="songName"/></th>
					<td><%=songName %></td>
				</tr>
				<tr>
					<th><liferay-ui:message key="songAuthor"/></th>
					<td><%=songAuthor %></td>
				</tr>
				<tr>
					<th><liferay-ui:message key="songCategory"/></th>
					<td><%=songCategory %></td>
				</tr>
				<tr>
					<th><liferay-ui:message key="songSinger"/></th>
					<td><%=songSinger %></td>
				</tr>
				<tr>
					<td colspan="2">
<hr>

<liferay-ui:ratings classPK="<%=userSongsId %>" className="<%=UserSongs.class.getName() %>"></liferay-ui:ratings>

<br><br>

<portlet:actionURL var="discussionURL" name="invokeTaglibDiscussion" />
<liferay-ui:discussion 
	classPK="<%=userSongsId %>" 
	userId="<%=themeDisplay.getUserId() %>" 
	className="<%=UserSongs.class.getName() %>" 
	subject="<%=songName %>" 
	formAction="<%=discussionURL %>"
	redirect="<%=cUrl.toString() %>"
	ratingsEnabled="<%=true %>"
>
</liferay-ui:discussion>						
					</td>
				</tr>
			</table>
		</aui:column>
	</aui:layout>
</div>

<script type="text/javascript">
	var songUrl = '<%= recordSong.getSongUrl()%>';
	var recodringUrl='<%= userSongs.getRecodingUrl()%>';
		
	var rate = .05;
	var interval;
	var karaokeShow;
	
	var array = $.parseJSON(songUrl);

	var timings = RiceKaraoke.simpleTimingToTiming(array);
	var karaoke = new RiceKaraoke(timings);
	var numDisplayLines = 2;
	var renderer = new SimpleKaraokeDisplayEngine(
			"karaoke-display-lyric", numDisplayLines);
	karaokeShow = karaoke.createShow(renderer, numDisplayLines);
	
</script>
<script type="text/javascript" src="<%= basePath%>resources/js/main.js"></script>